<template>
    <div class="banner">
        <div class="banner-img" @click="zs">
            <img src="static/mock/img/112.jpg" alt="">
        </div>
        <div class="banner-title">景区名称</div>

        <div class="img-swiper" v-show="imgshow" @click="hide">
            <swiper :options="swiperOption" >
        
                <swiper-slide v-for='item in bannerList' :key="item.id">
                    <img :src="item.imgUrl" alt="">
                </swiper-slide>
            
                <!-- Optional controls -->
                
            </swiper>
           <div class="swiper-pagination"  slot="pagination"></div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            imgshow:false,

            swiperOption:{
                pagination: {
                    el: '.swiper-pagination',
                    type:"fraction"
                    
                },
                loop:true
            },
            
            bannerList:[
                {
                    id:"01",
                    imgUrl:"static/mock/img/112.jpg"
                },
                {
                    id:"02",
                    imgUrl:"static/mock/img/112.jpg"
                },
                {
                    id:"03",
                    imgUrl:"static/mock/img/112.jpg"
                }
            ]
        }
    },
    methods:{
        zs(){
            this.imgshow=true
        },
        hide(){
            this.imgshow=false
        }
    }
}
</script>
<style lang="stylus" scoped>
    .banner{
        position relative
    }
    .banner-img{
       width 100%
       height 0 
       padding-bottom 55%
       overflow hidden 
       background-color #333;
    }
    .banner-img img{
        display block
        width 100%
        
    }
    .banner-title{
        position absolute
        color #fff
        font-size .32rem
        bottom .3rem
        left .3rem
    }
    .img-swiper{
        width 100%
        height 100%
        background-color #000
        position fixed
        top 0
        bottom 0
        left 0
        
        display flex
        justify-content center
        align-items center
    }
    .img-swiper img{
        width 100%
        display block
    }
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
        color #fff
        font-size .32rem
        bottom .6rem
    }
</style>